<template>
  <div style="">
    <!-- <span style="color: #409EFF;margin-left: 10px">档案管理</span> -->
    <el-radio-group v-model="chelaxy" style="margin-left:15px" @change="clearPagination();selectList()">
      <el-radio-button v-if="!(this.$store.getters.hospitalId == 76 || this.$store.getters.hospitalId == 201)" label="胸痛" />
      <el-radio-button label="卒中" />
    </el-radio-group>
    <el-row class="mt-10">
      <el-col :span="21" style="">
        <el-form ref="selectForm" :inline="true" :model="selectForm" class="demo-form-inline">
          <el-form-item label="建档时间范围" class="marginR20" prop="horizonTime">
            <el-date-picker
              v-model="selectForm.horizonTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              clearable
            />
          </el-form-item>
          <el-form-item label="当前科室" class="marginR20" prop="departmentName">
            <el-select v-model="selectForm.departmentName" clearable @change="selectUsersList(selectForm.departmentName)">
              <el-option v-for="(item,index) in departmentOptions" :key="'department'+index" :label="item.name" :value="item.name" />
            </el-select>
          </el-form-item>
          <el-form-item label="医生姓名" class="marginR20" prop="doctorId">
            <el-select v-model="selectForm.doctorId" clearable :disabled="!selectForm.departmentName">
              <el-option v-for="(item,index) in usersOptions" :key="'doctor'+index" :label="item.name" :value="item.id" />
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="上报状态" class="marginR20" prop="isUpload">
            <el-select v-model="selectForm.isUpload" placeholder="请选择" clearable>
              <el-option label="全部" value="2" />
              <el-option label="已上报" value="1" />
              <el-option label="未上报" value="0" />
            </el-select>
          </el-form-item> -->
        </el-form>
      </el-col>
      <el-col :span="3" style="">
        <el-button type="primary" @click="selectList()">查询</el-button>
        <el-button type="danger" @click="dele()">删除</el-button>
      </el-col>
    </el-row>
    <el-divider />
    <el-row>
      <el-col style="padding: 20px;">
        <el-table
          ref="multipleTable"
          v-loading="loading"
          :data="tableData"
          class="table"
          max-height="720"
          style="width: 100%; margin-top: -30px"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column
            type="selection"
            width="50"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="createdAt"
            label="建档时间"
            header-align="center"
            align="center"
          >
            <template slot-scope="scope" align="center">
              <span v-if=" scope.row.createdAt">
                <div>{{ scope.row.createdAt.split(' ')[0] }}</div>
                <div>{{ scope.row.createdAt.split(' ')[1] }}</div>
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="id"
            label="患者编号"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="name"
            label="患者姓名"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="sex"
            label="性别"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="age"
            label="年龄"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="departmentName"
            label="当前科室"
            header-align="center"
            align="center"
          />
          <el-table-column
            prop="doctorName"
            label="医生姓名"
            header-align="center"
            align="center"
          />
          <el-table-column
            label="档案状态"
            header-align="center"
            align="center"
            :formatter="Status"
          />
          <el-table-column label="建档上报" prop="cpcstat" header-align="center" align="center">
            <template slot-scope="scope" align="center">
              <div v-if="scope.row.cpcstat == 0">未上报</div>
              <div v-if="scope.row.cpcstat != 0 && scope.row.cpcstat">已上报</div>
            </template>
          </el-table-column>
          <el-table-column label="最终上报" prop="yzystat" header-align="center" align="center">
            <template slot-scope="scope" align="center">
              <div v-if="scope.row.yzystat < 6">
                {{ scope.row.yzystat == 0?'初始填写':scope.row.yzystat == 1?'退回重填':scope.row.yzystat == 2?'提交审核中':scope.row.yzystat == 3?'初审通过':scope.row.yzystat == 4?'上报重填':scope.row.yzystat == 5?'上报审核中':'' }}
              </div>
              <div v-if="scope.row.yzystat == 6 && scope.row.cpcstat">已上报</div>
            </template>
          </el-table-column>
          <!-- <el-table-column
            prop="isUpload"
            label="上报状态"
            header-align="center"
            align="center"
          >
            <template slot-scope="scope" align="center">
              <div v-if="scope.row.isUpload == '0' ||scope.row.isUpload == null" class="status span_blue">未上报</div>
              <div v-else class="status span_red">已上报</div>
            </template>
          </el-table-column> -->
          <el-table-column
            label="操作"
            min-width="180"
            header-align="center"
            align="center"
          >
            <template slot-scope="scope">
              <el-button type="text" @click="jumpsee(scope.row)">跳转查看</el-button>
              <el-button type="text" @click="operalog(scope.row)">操作日志</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="float: right"
          :current-page="currentPage"
          :page-sizes="[ 10, 20]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageTotal"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
    <el-dialog
      v-el-drag-dialog
      title="操作日志"
      :visible.sync="operalogsion"
      width="80%"
      center
      style="margin-top: -70px;margin-left: 140px"
    >
      <el-form class="elform" style="width: 100%;border-bottom: 1px solid #F0F0EE;">
        <el-row>
          <el-col :span="12" style="margin-left: 17px;margin-bottom: 5px">
            <el-form-item label="搜索:" prop="search" style="">
              <el-input
                v-model="search"
                style="width: 70%"
                placeholder="可搜索操作医院、操作人、事件名称搜索"
                clearable
              />
              <!-- @keyup.enter.native="searchlog()" -->
            </el-form-item>
          </el-col>
          <el-col :span="2" :offset="9">
            <el-button type="primary" @click="searchlog()">搜索</el-button>
          </el-col>
        </el-row>
        <el-row>
          <el-col style="padding: 20px;">
            <el-table
              ref="multipleTable"
              :data="tableDete"
              height="500px"
              class="table"
              style="width: 100%; margin-top: -30px"
              border
              :default-sort="{prop: 'created_at', order: 'ascending'}"
            >
              <el-table-column
                prop="created_at"
                sortable
                label="日期"
                min-width="150"
                header-align="center"
                align="center"
              />

              <el-table-column
                prop="operationName"
                label="操作名称"
                min-width="110"
                header-align="center"
                align="center"
              />
              <el-table-column
                label="地区"
                min-width="300"
                header-align="center"
                align="center"
                :formatter="forcondition"
              />
              <el-table-column
                prop="hospitalname"
                label="医院名称"
                min-width="180"
                header-align="center"
                align="center"
              />
              <el-table-column
                prop="username"
                label="操作人"
                min-width="130"
                header-align="center"
                align="center"
              />
              <el-table-column
                prop="remarks"
                label="备注"
                min-width="230"
                header-align="center"
                align="center"
              >
                <template slot-scope="scope">
                  <el-input v-model="scope.row.remarks" />
                </template>
              </el-table-column>
            </el-table>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button
          style="width: 60px;height: 30px;line-height: 20px;padding: 0px 5px;margin-left: 0px"
          @click="cancle"
        >取消</el-button>
        <el-button
          type="primary"
          style="width: 60px;height: 30px;line-height: 20px;padding: 0px 5px;margin-left: 100px"
          @click="save()"
        >保存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import elDragDialog from '@/directive/el-drag-dialog'
import { getDepartmentList, getUsersList, selectLog, selectList, deletelist, saveLog } from '@/api/back-management/File_management'

export default {
  name: 'FileManagement',
  directives: { elDragDialog },
  data() {
    return {
      chelaxy: (this.$store.getters.hospitalId == '76' || this.$store.getters.hospitalId == '201') ? '卒中' : '胸痛',
      tableData: [],
      /* 表格分页参数*/
      currentPage: 1,
      pagesize: 10,
      pageTotal: 0,
      /* 操作日志*/
      operalogsion: false,
      tableDete: [],
      search: '',
      userId: this.$store.getters.userId,
      apiToken: this.$store.getters.apiToken,
      loading: true,
      tablelist: [],
      dispatchId: '',
      updatalist: [],

      selectForm: {
        horizonTime: [], // 建档时间范围区间
        departmentName: '', // 当前科室
        doctorId: null, // 医生姓名
        isUpload: '2' // 上报状态
      },
      departmentOptions: [],
      usersOptions: []
    }
  },
  created() {
    this.selectList()
    this.selectDepartmentList()
  },
  methods: {
    selectDepartmentList() {
      const data = {
        hospitalId: this.$store.getters.hospitalId
      }
      getDepartmentList(data).then(res => {
        this.departmentOptions = res.data
      })
    },
    selectUsersList(departmentName) {
      const data = {
        userId: parseInt(this.userId),
        deptName: departmentName
      }
      this.selectForm.doctorId = null
      this.usersOptions = []
      getUsersList(data).then(res => {
        this.usersOptions = res
      })
    },

    clearPagination() {
      this.currentPage = 1
      this.pagesize = 10
      this.pageTotal = 0
      this.resetForm('selectForm')
    },
    /* 格式化数据*/
    forcondition(row) {
      if (row.parenthospitalname === '' || row.parenthospitalname === null) {
        if (row.hospitalname !== '' && row.hospitalname != null) {
          // return row.hospitalname + '(中心医院)'
          return row.hospitalname + ''
        } else if (row.hospitalname === '' || row.hospitalname === null) {
          return ''
        }
      } else {
        if (row.hospitalname === '' || row.hospitalname === null) {
          // return row.parenthospitalname + '(中心医院)'
          return row.parenthospitalname + ''
        } else if (row.hospitalname !== '') {
          // return row.parenthospitalname + '(中心医院)' + '-' + row.hospitalname + '(基层医院)'
          return row.parenthospitalname + '' + ' - ' + row.hospitalname + ''
        }
      }
    },
    /* 弹出框保存*/
    save() {
      this.updatalist = []
      for (let i = 0; i < this.tableDete.length; i++) {
        const obj = {}
        obj.department = this.tableDete[i].department
        obj.userId = this.tableDete[i].userId
        obj.username = this.tableDete[i].username
        obj.result = this.tableDete[i].result
        obj.remarks = this.tableDete[i].remarks
        obj.parenthospitalname = this.tableDete[i].parenthospitalname
        obj.operationName = this.tableDete[i].operationName
        obj.id = this.tableDete[i].id
        obj.hospitalname = this.tableDete[i].hospitalname
        obj.hospitalId = this.tableDete[i].hospitalId
        obj.dispatchId = this.tableDete[i].dispatchId
        obj.created_at = this.tableDete[i].created_at
        obj.updated_at = this.tableDete[i].updated_at
        this.updatalist.push(obj)
      }
      saveLog(this.updatalist).then(res => {
        if (res.code === 9999) {
          this.$message({
            type: 'error',
            message: '保存失败!'
          })
        } else {
          this.$message({
            type: 'success',
            message: '保存成功!'
          })
          this.operalogsion = false
          this.selectList()
        }
      })
    },
    /* 格式化数据*/
    Status(row) {
      let str = ''
      if (row.isOpen === '1') {
        str += '急救中 '
      }
      if (row.constatus !== '3' && row.constatus !== '' && row.constatus != null) {
        str += '会诊中 '
      }
      if (row.status === '1') {
        str += '重点关注 '
      }
      if (row.status === '1') {
        str += '已归档 '
      }
      return str
    },
    /* 单选框改变*/
    selectList() {
      this.loading = true
      const data = {
        pageNum: this.currentPage,
        pageSize: this.pagesize,
        diseaseType: this.chelaxy,
        userId: this.userId,
        dateStart: this.selectForm.horizonTime && this.selectForm.horizonTime[0] || '',
        dateEnd: this.selectForm.horizonTime && this.selectForm.horizonTime[1] || '',
        departmentName: this.selectForm.departmentName,
        doctorId: parseInt(this.selectForm.doctorId) || null,
        cpcstat: this.selectForm.cpcstat,
        yzystat: this.selectForm.yzystat
        // isUpload: this.selectForm.isUpload
      }
      selectList(data).then(res => {
        this.tableData = res.data.list
        this.pageTotal = res.data.total
        this.loading = false
      })
    },
    /* 删除*/
    dele() {
      this.$confirm('此操作将永久删除该档案, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deletelist(this.tablelist).then(res => {
          if (res.code === 0) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.selectList()
          } else {
            this.$message({
              type: 'error',
              message: '删除失败!'
            })
          }
        })
      }).catch(() => {})
    },
    /* 跳转查看*/
    jumpsee(row) {
      row.sourcePage = 'FileManagement'
      this.$router.push({
        name: 'patientsList',
        params: row
      })
    },
    /* 操作日志*/
    operalog(data) {
      this.dispatchId = data.id
      const obj = {}
      obj.apiToken = this.apiToken
      obj.dispatchId = data.id
      obj.order = 1
      obj.text = this.search
      selectLog(obj).then(res => {
        this.tableDete = res.data.list
        this.operalogsion = true
      })
    },
    /* 弹出框内部 输入框查询*/
    searchlog() {
      const obj = {}
      obj.apiToken = this.apiToken
      obj.dispatchId = this.dispatchId
      obj.order = 1
      obj.text = this.search
      selectLog(obj).then(res => {
        this.tableDete = res.data.list
        this.operalogsion = true
      })
    },
    /* 返回*/
    cancle() {
      this.operalogsion = false
    },
    /* 选中框*/
    handleSelectionChange(row) {
      this.tablelist = []
      for (let i = 0; i < row.length; i++) {
        this.tablelist.push(row[i].id)
      }
    },
    // 分页尺寸改变
    handleSizeChange(size) {
      this.pagesize = size
      this.selectList()
    },
    // 分页换页
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage
      this.selectList()
    },
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style scoped>
  .table /deep/ th:first-child .cell, .el-table--border td:first-child .cell {
    padding-left: 7px;
  }
  .marginR20 {
    margin-right: 20px;
  }
</style>
